<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Áreas Involucradas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="SHORTCUT ICON"
		href="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/logoTcBuen.ico" />
</h:head>

<h:body>

	<ui:composition template="/MenuTemplate.xhtml">

		<ui:define name="content">
			<p:layout>
				<p:layoutUnit position="center" scrollHeight="auto">
					<f:view>
						<p:ajaxStatus onstart="statusDialog.show();"
							onsuccess="statusDialog.hide();" />
						<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
							draggable="false" closable="false">
							<p:graphicImage
								value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
						</p:dialog>

						<div id="logo" align="center">
							<h:form id="form">
								<p:growl id="men" sticky="true" />
								<p:panel id="td" header="Areas Involucradas">

									<p:dataTable var="car" value="#{areasInvolucradasView.data}"
										id="listaTDo" editable="true" scrollable="true"
										scrollHeight="300"
										filteredValue="#{areasInvolucradasView.data}">

										<p:ajax event="rowEdit"
											listener="#{areasInvolucradasView.onEdit}" />
										<p:ajax event="rowEditCancel"
											listener="#{areasInvolucradasView.onCancel}" />

										<p:column headerText="Editar" style="width: 30px">
											<p:rowEditor />
										</p:column>

										<p:column headerText="Nombre del Área" style="width: 100px"
											filterBy="nombreArea">
											<p:cellEditor>
												<f:facet name="output">
													<h:outputLabel value="#{car.nombreArea}" />
												</f:facet>
												<f:facet name="input">
													<p:inputTextarea value="#{car.nombreArea}" />
												</f:facet>
											</p:cellEditor>
										</p:column>

										<p:column headerText="Estado del Registro"
											style="width: 100px" filterBy="estadoRegistro"
											filterOptions="#{areasInvolucradasView.manufacturerOptions}"
											filterMatchMode="exact">
											<p:cellEditor>
												<f:facet name="output">
													<h:outputText value="#{car.estadoRegistro}" />
												</f:facet>
												<f:facet name="input">
													<h:selectOneMenu
														value="#{areasInvolucradasView.estadoRegistro}">
														<f:selectItem itemLabel="Activo" itemValue="A" />
														<f:selectItem itemLabel="Retirado" itemValue="R" />
													</h:selectOneMenu>
												</f:facet>
											</p:cellEditor>
										</p:column>

										<f:facet name="footer">
											<p:commandButton id="viewButton" value="Crear"
												icon="ui-icon-newwin" oncomplete="PF('carDialog').show()" />

										</f:facet>
									</p:dataTable>

									<!--		Ventana emergente          -->

									<p:dialog id="dialog" header="Crear Areas Involucradas"
										widgetVar="carDialog" resizable="false" width="500"
										showEffect="clip" hideEffect="fold">

										<h:panelGrid columns="2" id="panel">

											<h:outputText id="msgEstadoRegistro" value="* Estado:" />
											<p:selectOneMenu id="estado"
												binding="#{areasInvolucradasView.estado}"
												value="#{areasInvolucradasView.estadoRegistro}"
												required="true" requiredMessage="El Estado es requerido">
												<f:selectItem itemLabel="Seleccione" itemValue="" />
												<f:selectItem itemLabel="ACTIVO" itemValue="A" />
												<f:selectItem itemLabel="RETIRADO" itemValue="R" />
											</p:selectOneMenu>

											<h:outputText id="msgNombreArea" value="* Nombre del Área:" />
											<p:inputText id="txtNombreArea" required="true"
												maxlength="100" requiredMessage="Nombre del área  requerido"
												binding="#{areasInvolucradasView.txtNombreArea}" />
										</h:panelGrid>

										<p:separator id="separator" />
										<h:panelGrid id="panelBotones" columns="1">
											<p:commandButton id="btnSave" value="Guardar"
												action="#{areasInvolucradasView.action_create}"
												binding="#{areasInvolucradasView.btnSave}"
												icon="ui-icon-disk" update="listaTDo,men,panel,panelBotones" />
										</h:panelGrid>
									</p:dialog>
								</p:panel>
							</h:form>
						</div>
					</f:view>

				</p:layoutUnit>

			</p:layout>

		</ui:define>

	</ui:composition>
</h:body>
</html>